<!DOCTYPE html>
<html ${htmlAttrs}>
  <head>
    ${head}
  </head>
  <body ${bodyAttrs}>
    <script>
      // Add dark / light detection that runs before Vue.js load. Borrowed from overreacted.io
      (function() {
        window.__onThemeChange = function() {};
        function setTheme(newTheme) {
          window.__theme = newTheme;
          preferredTheme = newTheme;
          document.body.setAttribute('data-theme', newTheme);
          window.__onThemeChange(newTheme);
        }

        var preferredTheme;
        try {
          preferredTheme = localStorage.getItem('theme');
        } catch (err) { }

        window.__setPreferredTheme = function(newTheme) {
          setTheme(newTheme);
          try {
            localStorage.setItem('theme', newTheme);
          } catch (err) {}
        }

        var darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
        darkQuery.addListener(function(e) {
          window.__setPreferredTheme(e.matches ? 'dark' : 'light')
        });

        setTheme(preferredTheme || (darkQuery.matches ? 'dark' : 'light'));
      })();
    </script>

    ${app}
    ${scripts}
  </body>
</html>